import React from "react";
import { apiGetData } from '@/request/home'
import './style/style.less'
import '@/font/iconfont.css'
import Card from "@/views/dataStatics/StatsCard";
import OnlineIncome from '@/views/dataStatics/IsOnlineIncome'
import Registered from '@/views/dataStatics/Registered'
import TimePay from '@/views/dataStatics/TimePay'
import { Col, Row } from 'antd';
import TheButton from "@/components/TheButton";
import { exportTable } from '@/utils/exportTable.js'
import _ from 'lodash'


class Index extends React.Component {
    state = {
        dataSource: [],
        goodsTop: [],
        serviceTop: [],
    }
    async componentDidMount() {

        await this.getData()
        await this.getGoodsTop()
        await this.getServiceTop()
    }


    componentWillUnmount() {

    }

    getData = async () => {
        let res = await apiGetData()
        if (res.data && res.code === 0) {
            let data = res.data
            let dataSource = [
                {
                    top: [
                        {
                            title: '用户总数',
                            value: data.allMemberCount > 10000 ? (data.allMemberCount / 10000).toFixed(2) + "万" : data.allMemberCount || 0
                        },
                    ],
                    bottom: [
                        {},
                        {
                            title: '今日新增',
                            value: data.todayNewMemberCount > 10000 ? (data.todayNewMemberCount / 10000).toFixed(2) + "万" : data.todayNewMemberCount || 0
                        },
                    ]
                },
                {
                    top: [
                        {
                            title: '订单总数',
                            value: data.allOrderCount > 10000 ? (data.allOrderCount / 10000).toFixed(2) + "万" : data.allOrderCount || 0
                        },
                    ],
                    bottom: [
                        {
                            title: '电商',
                            value: data.onLineAllOrderCount > 10000 ? (data.onLineAllOrderCount / 10000).toFixed(2) + "万" : data.onLineAllOrderCount || 0
                        },
                        {
                            title: '同城',
                            value: data.tcpsOrderCount > 10000 ? (data.tcpsOrderCount / 10000).toFixed(2) + "万" : data.tcpsOrderCount || 0
                        },
                        {
                            title: '自提',
                            value: data.ddztOrderCount > 10000 ? (data.ddztOrderCount / 10000).toFixed(2) + "万" : data.ddztOrderCount || 0
                        },
                        {
                            title: '服务',
                            value: data.fwOrderCount > 10000 ? (data.fwOrderCount / 10000).toFixed(2) + "万" : data.fwOrderCount || 0
                        },
                        {
                            title: '收银台',
                            value: data.sytOrderCount > 10000 ? (data.sytOrderCount / 10000).toFixed(2) + "万" : data.sytOrderCount || 0
                        },
                    ]
                },
                {
                    top: [
                        {
                            title: 'APP总营业额',
                            value: data.appAllPrice > 1000000 ? (data.appAllPrice / 1000000).toFixed(2) + "万" : <React.$Price price={data.appAllPrice || 0} />
                        },
                    ],
                    bottom: [
                        {
                            title: '电商',
                            value: data.shopOrderPayPrice > 1000000 ? (data.shopOrderPayPrice / 1000000).toFixed(2) + "万" : <React.$Price price={data.shopOrderPayPrice || 0} />
                        },
                        {
                            title: '同城',
                            value: data.tcpsSumPrice > 1000000 ? (data.tcpsSumPrice / 1000000).toFixed(2) + "万" : <React.$Price price={data.tcpsSumPrice || 0} />
                        },
                        {
                            title: '自提',
                            value: data.ddztSumPrice > 1000000 ? (data.ddztSumPrice / 1000000).toFixed(2) + "万" : <React.$Price price={data.ddztSumPrice || 0} />
                        },
                        {
                            title: '服务',
                            value: data.appfwSumPrice > 1000000 ? (data.appfwSumPrice / 1000000).toFixed(2) + "万" : <React.$Price price={data.appfwSumPrice || 0} />
                        },
                    ]
                },
                {
                    top: [
                        {
                            title: '门店总营业额',
                            value: data.offLineSumPrice > 1000000 ? (data.offLineSumPrice / 1000000).toFixed(2) + "万" : <React.$Price price={data.offLineSumPrice || 0} />
                        },
                    ],
                    bottom: [
                        {},
                        {
                            title: '门店今日营业额',
                            value: data.todayOffLineSumPrice > 1000000 ? (data.todayOffLineSumPrice / 1000000).toFixed(2) + "万" : <React.$Price price={data.todayOffLineSumPrice || 0} />
                        },
                    ]
                },
            ]
            this.setState({ dataSource })
        }
    }

    getGoodsTop = async () => {
        let res = await React.$post("/admin/goodsInfo/findGoodsPageBySales", { pageNo: 1, pageSize: 10, export: "N" })
        if (res.code === 0 && res.data) {
            this.setState({
                goodsTop: res.data
            })
            console.log(res.data)
        }
    }

    getServiceTop = async () => {
        let res = await React.$post("/admin/storeService/findServicePageByOrderCount", { pageNo: 1, pageSize: 10, export: "N" })
        if (res.code === 0) {
            this.setState({
                serviceTop: res.data
            })
            console.log(res.data)
        }
    }
    exportGoods = async () => {
        let res = await React.$post("/admin/goodsInfo/findGoodsPageBySales", { pageNo: 1, pageSize: 10, export: "Y" })
        if (res.code === 0 && res.data) {
            let tH = [
                { prop: 'goodsId', title: '商品ID' },
                { prop: 'goodsName', title: '商品名称' },
                { prop: 'currentPrice', title: '价格' },
                { prop: 'sales', title: '销量' },
            ]
            let tB = res.data.map(item => {
                return {
                    goodsId: item.goodsId ? item.goodsId : '/',
                    goodsName: item.goodsName ? item.goodsName : '/',
                    currentPrice: item.currentPrice ? Number(item.currentPrice/100).toFixed(2) : '/',
                    sales: item.sales ? item.sales : '/',
                }
            })
            exportTable(tH, tB, '商品TOP10')
        } else {
            React.$message({
                type: 'warning',
                content: '导出失败'
            })
            return false
        }
    }
    exportService = async () => {
        let res = await React.$post("/admin/storeService/findServicePageByOrderCount", { pageNo: 1, pageSize: 10, export: "Y" })
        if (res.code === 0 && res.data) {
            let tH = [
                { prop: 'serviceId', title: '服务ID' },
                { prop: 'serviceName', title: '服务名称' },
                { prop: 'serviceRealPrice', title: '价格' },
                { prop: 'productCount', title: '销量' },
            ]
            let tB = res.data.map(item => {
                return {
                    serviceId: item.serviceId ? item.serviceId : '/',
                    serviceName: item.serviceName ? item.serviceName : '/',
                    serviceRealPrice: item.serviceRealPrice ? Number(item.serviceRealPrice/100).toFixed(2) : '/',
                    productCount: item.productCount ? item.productCount : '/',
                }
            })
            exportTable(tH, tB, '服务TOP10')
        } else {
            React.$message({
                type: 'warning',
                content: '导出失败'
            })
            return false
        }
    }

    render() {
        const { dataSource, goodsTop, serviceTop } = this.state
        return <div className={"p-layout-box configuration"}>
            <div className="card-box">
                {
                    dataSource.map((v, i) => {
                        return <Card key={i} top={v.top} bottom={v.bottom} />
                    })
                }
            </div>
            <div style={{ marginTop: 30, fontWeight: 600 }}>商城收入统计图</div>
            <OnlineIncome style={{ overflow: 'hidden' }} height={'500px'} width={'100%'} isOnline='online' />
            <div style={{ marginTop: 30, fontWeight: 600 }}>门店收入统计图</div>
            <OnlineIncome style={{ overflow: 'hidden' }} height={'500px'} width={'100%'} isOnline='offline' />
            <div style={{ marginTop: 30, fontWeight: 600 }}>平台用户统计图</div>
            <Registered style={{ overflow: 'hidden' }} height={'500px'} width={'100%'} />
            <div style={{ width: '90%', margin: 'auto' }}>
                <Row gutter={[32, 16]}>
                    <Col span={12} > </Col>
                    <Col span={12} > </Col>
                    <Col span={12} >
                        <div className="card-count">
                            <div className="card-count-title" >
                                商品TOP10
                                <div className="card-count-button"><TheButton type="" size="large" onClick={() => this.exportGoods()} >导出</TheButton></div>
                            </div>

                            <ul >
                                {
                                    goodsTop.map((v, i) => {
                                        return <li>{v.goodsName}</li>
                                    })
                                }
                            </ul>
                        </div>
                    </Col>
                    <Col span={12} >
                        <div className="card-count">
                            <div className="card-count-title">服务TOP10
                                <div className="card-count-button"><TheButton type="" size="large" onClick={() => this.exportService()} >导出</TheButton></div>
                            </div>
                            <ul>
                                {
                                    serviceTop.map((v, i) => {
                                        return <li>{v.serviceName}</li>
                                    })
                                }
                            </ul>
                        </div>
                    </Col>
                </Row>
            </div>
            <div style={{ marginTop: 30, fontWeight: 600 }}>付款时段</div>
            <TimePay style={{ overflow: 'hidden' }} height={'500px'} width={'100%'} />
        </div>
    }
}

export default Index;
